//1，页面总高度设置
.container {
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background-color: #F3F3F3;
	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
}

/* #ifdef H5 */
.container {
	height: calc(100vh - 44px);
	width: 100%;
	overflow: hidden;
	background-color: #F3F3F3;

}

/* #endif */


//2，消息主要内容
.message {
	background-color: #F3F3F3;
	width: 100%;
	transition: all ease-in-out 0.15s;
}


//3，输入框
.send {
	// display: flex;
	// flex-direction: row;
	// align-items: center;
	// justify-content: space-between;
	/* transition: all 0.1s ease; */
	position: relative;
	width: 100%;
	height: 110rpx;

}

.send-new-msg {
	position: absolute;
	z-index: 9;
	top: -80rpx;
	right: 30rpx;
	width: fit-content;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 20rpx;
	background-color: #333;
	border-radius: 10rpx;
	font-size: 28rpx;
	transition: all .3s ease-in-out;

	text {
		color: #fff;
	}

	&:before {
		content: '';
		border-width: 5px;
		border-style: solid;
		border-color: #333 transparent transparent transparent;
		position: absolute;
		bottom: 100%;
		top: 60rpx;
		left: 50%;
		margin-left: -5px;
	}
}


.send-row {
	width: 100%;
	height: 110rpx;
	padding: 0 20upx;
	box-sizing: border-box;
	border-top: 2upx solid #EEE;
	border-bottom: 2upx solid #EEE;
	background: #fff;
	// background-color: red;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	/* -webkit-overflow-scrolling: auto !important;
	overflow-scrolling: auto !important; */

	.input {
		height: 80upx;
		line-height: 80upx;
		padding: 0 30upx;
		font-size: 34upx;
		border-radius: 60upx;
		background-color: #fff;
		width: calc(100% - 120upx - 20upx - 40upx - 60upx);
		background-color: #FAFAFA;
		margin: 0 10rpx;
	}

	.icon {
		width: 60upx;
		height: 60upx;
		margin: 0 7rpx;
	}

	.btn {
		color: #fff;
		width: 120rpx;
		height: 65rpx;
		font-size: 24rpx;
		line-height: 65rpx;
		text-align: center;
		border-radius: 35rpx;
		background: linear-gradient(to right, #f09b37, #eb632c);
	}
}

//4，工具栏框
.send-file {
	/* transition: all 0.1s ease; */

	.send-file-list {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;

		.file-box {
			width: 25%;
			position: relative;

			.file-box-item {
				width: 125rpx;
				height: 125rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				// height: 80rpx;
				background-color: #fff;
				text-align: center;
				// padding: 15rpx 0;
				border-radius: 20rpx;
				margin-top: 25rpx;

				image {
					margin-top: 15rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.text {
					text-align: center;
					font-size: 26rpx;
				}

				&:active {
					background-color: #DEDEDE;
				}
			}

		}
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 1.5s; // 设置过渡效果持续时间
}

.fade-enter,
.fade-leave-to {
	opacity: 0; // 设置开始和结束时的透明度
}

.history-tips {
	position: fixed;
	left: 0;
	top: var(--window-top);
	width: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.15);
	height: 72rpx;
	line-height: 72rpx;
	// transform: translateY(-80rpx);
	transition: transform 0.3s ease-in-out 0s;
	text-align: center;
	// color: #fff;

	&.show {
		transform: translateY(0);
	}
}